<template>
  <div>
    <!-- 头部 -->
    <top-login></top-login>
    <!-- 选择 -->
    <nav-top></nav-top>

    <div class="painting2">
      <!-- 版心 -->
      <div class="container">
        <!-- 左边作品栏目 -->
        <div class="production">
          <!-- 作品展示 -->
          <div class="show">
            <!-- 头部作品名字 -->
            <div class="toptitle">
              <!-- 左边介绍 -->
              <div class="left">
                <!-- 作品名字 -->
                <div class="title">{{recommended.title}}</div>
                <!-- 发布时间 -->
                <div class="time">
                  发布于<span>{{recommended.time}}</span><span>13:26</span>
                </div>
                <!-- 看/爱/评 -->
                <div class="all">
                  <!-- 看 -->
                  <div class="look">
                    <i></i>
                    <h6>{{recommended.look}}</h6>
                  </div>
                  <!-- 收藏 -->
                  <div class="like">
                    <i></i>
                    <h6>{{recommended.like}}</h6>
                  </div>
                  <!-- 评论 -->
                  <div class="talk">
                    <i></i>
                    <h6>0</h6>
                  </div>
                </div>
                <!-- 热门/推荐标签 -->
                <div class="logo">
                  <div class="box">
                    <img src="../assets/img/smlogo/work_hot.png" alt="" />
                    <h6>热门</h6>
                  </div>
                </div>
              </div>

              <!-- 右边二维码 -->
              <div class="right">
                <img src="../assets/img/smlogo/minappqr.jpg" alt="" />
                <h6>微信扫一扫小程序打开</h6>
              </div>
            </div>

            <!-- 标签-->
            <div class="tabs">
              <i></i>
              <div class="navtabs">
                <div class="text">十二生肖</div>
                <div class="text">插画</div>
                <div class="text">兔子</div>
                <div class="text">原创</div>
              </div>
            </div>
            <!-- 图片 -->
            <div class="picture">
              <div v-for="(item, index) in picture" :key="index">
                <img :src="item" alt="" />
              </div>
            </div>

            <!-- 来源 -->
            <div class="textweb">
              <div class="left">
                <h6>来源：网站</h6>
                <h5><i></i>举报作品</h5>
                <h4><i></i>未经作者授权禁止转载</h4>
              </div>

              <div class="right">
                <i></i>
                <i></i>
                <i></i>
              </div>
            </div>
          </div>
          <!-- 点赞人数 -->
          <div class="takepeople">
            <h6>{{ much }}人赞</h6>

            <div class="headall">
              <!-- 点赞的头像 -->
              <div class="headbox" v-for="item in likepeople" :key="item.id">
                <img :src="item.head" alt="" />
                <div class="name">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <!-- 评论人数 -->
          <div class="comment">
            <h6>发表评论</h6>
            <textarea
              name=""
              id=""
              cols="30"
              rows="6"
              placeholder="说点什么吧..."
              v-model="textcontent"
            ></textarea>
            <div class="submit" @click="mytalk">发布</div>

            <div class="record">{{talkingabout.length}}条记录</div>
            <div class="totalk">
              <!-- 没有评论的情况 -->
              <div class="notale" v-if="talkingabout.length==0">没有评论哦~</div>
              <!-- 有评论的情况 -->
              <div class="havetale" v-if="talkingabout.length!=0">
                <!-- 评论内容 -->
                <div class="someone" v-for="item in talkingabout" :key="item.id">
                  <!-- 个人信息 -->
                  <div class="left">
                    <!-- 评论的头像 -->
                    <div class="takehead">
                      <img :src="item.head" alt="" />
                    </div>
                    <div class="text">
                      <!-- 评论名字 -->
                      <div class="takename">{{item.author}}</div>
                      <!-- 评论时间 -->
                      <div class="talktime">{{item.time}}</div>
                      <!-- 评论内容 -->
                      <div class="talkcontent">{{item.content}}</div>
                    </div>
                  </div>

                  <!-- 右边的小红心 -->
                  <div class="right">
                    <!-- 空心 -->
                    <i v-show="item.likeit" @click="likeits(item.id)"></i>
                    <!-- 实心 -->
                    <i v-show="!item.likeit" @click="likeits(item.id)"></i>
                    {{item.like}}
                  </div>
                </div>
                <!-- 分页 -->
                <!-- <el-pagination
                  background
                  layout="prev, pager, next"
                  :total=1
                >
                </el-pagination> -->
              </div>
            </div>
          </div>
        </div>

        <!-- 作者栏目 -->
        <div class="author">
          <div class="allthis">
            <!-- 关注那些 -->
            <div class="authortop">
              <img :src="head" alt="" />
              <h5>{{recommended.author}}</h5>
              <h6>人气：<span>427.45万</span></h6>
            <!-- 是否关注 -->
              <div class="have">
                <!-- <el-button :plain="true" @click="open2">成功</el-button> -->
                <!-- <div class="attention" @click="attentions">{{attention==true?"已关注":"关注"}}</div> -->
                <div class="attention" @click="attentions" v-if="!attention">关注</div>
                <div class="attention" v-if="attention">已关注</div>
                
                <div class="chat">私聊</div>
                <div class="work">工作联系</div>
              </div>

              <div class="official">
                <div class="smlogo">
                  <img src="../assets/img/smlogo/star.png" alt="" />
                  <h6>王国推荐作者</h6>
                </div>
                <div class="smlogo">
                  <img src="../assets/img/smlogo/red_v.png" alt="" />
                  <h6>插画师</h6>
                </div>
              </div>
            </div>
            <!-- 点赞 -->
            <div class="praise">
              <div class="box" v-if="!youlike" @click="mabylike">
                <i></i>
                赞一个
              </div>
              <div class="box2" v-if="youlike">
                <i></i>
                已点赞
              </div>


            </div>
            <!-- 广告 -->
            <div class="adventure">
              <img src="../assets/img/smlogo/buyit.jpg" alt="" />
            </div>
          </div>
        </div>

        
      </div>
      <!-- 底部更多作品 -->
      <div class="painting5">
          <div class="container">
            
            <h6>养猫画画的随随的更多作品</h6>

            <div class="another">
              <img :src="item" alt=""  v-for="item in another" :key="item">
            </div>
          </div>
        </div>
    </div>

    <!-- 底部 -->
    <bottom-login></bottom-login>
  </div>
</template>

<script>
import { getJsonData } from "../api/home.js";
import topLogin from "../components/topLogin";
import navTop from "../components/navTop";
import bottomLogin from "../components/bottomLogin";
export default {
  props:["author"],
  data() {
    return {
      //是否关注
      attention:false,
      //作品展示数据
      recommended:"",
      picture: null,
      // 头像
      head: null,
      //喜欢的人的数据
      likepeople: null,
      // 点赞人长度
      much: null,
      //更多作品的数量
      much2: null,
      //其他作品
      another: null,
      //点击的下标
      index:null,
      //判断是否点赞
      youlike:false,
      //评论
      talkingabout:"",
      //发布评论内容
      textcontent:"",
      //下标
      id:2837
    };
  },
  methods:{
    //关注
    attentions(){
      // 关注是否切换
      this.attention=true
      this.$emit("attentions",this.recommended.id)
      //获取我的信息
      // let minemessage = JSON.parse(window.localStorage.getItem("minemessage"));
      // 让我的喜欢+1
      // minemessage[0].myfavouritepeople +=1
      //保存进本地
      // window.localStorage.setItem("minemessage",JSON.stringify(minemessage));
      this.$message({
          message: '关注成功',
          center: true,
          type:'success'
        });
      
    },
    // 点赞作品
    mabylike(){
       this.$message({
          message: '谢谢你的赞哦~',
          center: true,
          type:'success'
        });
      // console.log(this.likepeople);
      //取出我的信息
      let minemessage = JSON.parse(window.localStorage.getItem("minemessage"));
      // 点赞
      this.youlike=true
      //点击赞一个然后传数据到app添加我的喜欢
      this.$emit("myfavourite",this.recommended.id)
      //加入我的头像
     this.likepeople.unshift({
        "id":this.id,
        "name":minemessage[0].name,
        "head":minemessage[0].head
      })
      this.much=this.likepeople.length
    },
    //发布评论
    mytalk(){
      // console.log(this.textcontent);
      // 清空发布
      
       
      
      let time=new Date();
      //年月日时分秒
      let year = time .getFullYear();
      let y = time.getMonth() + 1;
      let d = time.getDate();
      let times=year+"/"+y+"/"+d
      // console.log(times);
      if(this.textcontent!=""){
         this.$message({
          message: '发布成功',
          type: 'success'
        });
      
      //取出我的信息
      let minemessage = JSON.parse(window.localStorage.getItem("minemessage"));
      //push到talkingabout
      this.talkingabout.push({
        "id":this.id,
        "head":minemessage[0].head,
        "author":minemessage[0].name,
        "time":times,
        "content":this.textcontent,
        "like":0,
        "likeit":true
      })
      this.id+=1
      // console.log(this.talkingabout);
      this.textcontent=""
      }else{
         this.$message.error('请输入内容');
      }
      
    },
    //点赞评论
    likeits(id){
      console.log(id);
      //查找对应的id
      let index = this.talkingabout.findIndex((item)=>item.id==id)
      //获得我点赞的下标
      console.log(index);
      //切换小红心
      this.talkingabout[index].likeit=!this.talkingabout[index].likeit
      if(this.talkingabout[index].likeit==false){
        this.talkingabout[index].like+=1
      }else{
         this.talkingabout[index].like-=1
      }
    }

  },
  created() {
    

    let {index}=this.$route.query
    this.index=index
    getJsonData().then((data) => {

      // 对应数据下标里的图片和头像
      this.recommended=data.recommended[index]
      this.picture = data.recommended[index].picture;
      this.head = data.recommended[index].head2;
      this.likepeople = data.recommended[index].likepeople;
      this.another = data.recommended[index].another;
      this.much = this.likepeople.length;
      this.much2 = this.another.length;
      //评论
      this.talkingabout=data.recommended[index].talkingabout
      

      if(this.much2>6){
        this.another=this.another.slice(0,6)
      }

    //判断是否点赞
    let youlike2=JSON.parse(window.localStorage.getItem("myloves"));
    if(!youlike2){
      return
    }else{
      // 有值则搜索是否和显示的下标有的
      let theindex2=youlike2.findIndex((item)=>item.id==this.recommended.id)
      //如果==-1就是没找到数据，则是没关注，否则就是关注
        if(theindex2==-1){
          this.youlike=false
        }else{
          this.youlike=true
        }
    }
    // 判断是否关注
      let token =JSON.parse(window.localStorage.getItem("authors"));
      //如果没有值则
      if(!token){
        console.log("没找到");
        // ==-1就是找不到 ！=-1就是找得到
        return
      }else{
        // 有值则搜索是否和显示的下标有的
        let theindex=token.findIndex((item)=>item.id==this.recommended.id)
        //如果==-1就是没找到数据，则是没关注，否则就是关注
        if(theindex==-1){
          this.attention=false
        }else{
          this.attention=true
        }
        
      }
      
    });


  },

  components: {
    topLogin,
    bottomLogin,
    navTop,
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/base.css";

.painting2 {
  background-color: #f8f9fb;
}
.painting2 .container {
  padding-top: 22px;
  display: flex;
  position: relative;
}
// 右边栏目
.painting2 .container .production .show {
  background-color: #ffffff;
  margin-right: 21px;
  padding: 20px;
  flex: 1;
  border-radius: 3px;
  box-shadow: 0px 0px 8px 0px #d8d8d8;
}
// 作品名字
.production .toptitle {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
}
//左边
.production .toptitle .left {
  display: flex;
  flex-direction: column;
}
.production .toptitle .left .title {
  font-size: 25px;
  height: 35px;
  line-height: 35px;
  color: #31393b;
  font-weight: bolder;
}
.production .toptitle .left .time {
  color: #b9b7bc;
  height: 26px;
  line-height: 26px;
  font-size: 13px;
}
.production .toptitle .left .time span {
  margin-left: 5px;
}
.production .toptitle .left .all {
  display: flex;
  height: 28px;
  line-height: 28px;
}
//眼睛
.production .toptitle .left .all .look {
  display: flex;
  align-items: center;
  color: #9aa2a5;
}
.production .toptitle .left .all .look i {
  display: block;
  background-image: url(../assets/img/smlogo/see.png);
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
// 收藏
.production .toptitle .left .all .like {
  display: flex;
  align-items: center;
  color: #9aa2a5;
  margin-left: 15px;
}
.production .toptitle .left .all .like i {
  display: block;
  background-image: url(../assets/img/smlogo/like.png);
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
//评论
.production .toptitle .left .all .talk {
  display: flex;
  align-items: center;
  color: #9aa2a5;
  margin-left: 15px;
}
.production .toptitle .left .all .talk i {
  display: block;
  background-image: url(../assets/img/smlogo/msg_0.png);
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
.production .toptitle .left .logo {
  display: flex;
  margin-top: 10px;
}
.production .toptitle .left .logo .box {
  display: flex;
  flex-direction: column;
  margin-right: 10px;
  align-items: center;
}
.production .toptitle .left .logo .box img {
  width: 30px;
  height: 30px;
  margin-bottom: 6px;
}
.production .toptitle .left .logo .box h6 {
  color: #393b3a;
}
.production .toptitle .right {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #f0f0f0;
  margin-bottom: 30px;
}
.production .toptitle .right img {
  display: block;
  padding: 14px;
  width: 85px;
  height: 85px;
}
.production .toptitle .right h6 {
  height: 28px;
  line-height: 28px;
  color: #b3b0a7;
  margin: 0px 8px;
}
.production .tabs {
  display: flex;
  align-items: center;
  margin-top: 21px;
}
.production .tabs i {
  display: block;
  background-image: url(../assets/img/smlogo/tag.png);
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.production .tabs .navtabs {
  display: flex;
  flex-wrap: wrap;
}
.production .tabs .navtabs .text {
  color: #251a18;
  border: 1px solid #f0f0f0;
  margin: 0px 2px;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding: 0px 8px;
  border-radius: 3px;
}
.production .picture {
  margin-top: 30px;
}
.production .picture img {
  width: 847px;
  margin-bottom: 10px;
}
// 左边作者
.painting2 .container .author .authortop {
  box-shadow: 0px 0px 8px 0px #d8d8d8;
  background-color: #ffffff;
  width: 268px;
  // height: 346px;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 18px;
}
.painting2 .container .author .authortop img {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  margin: 0px auto;
  margin-top: 36px;
}
.painting2 .container .author h5 {
  margin-top: 10px;
  height: 37px;
  line-height: 37px;
  font-weight: bold;
  font-size: 20px;
}
.painting2 .container .author .authortop h6 {
  height: 32px;
  line-height: 32px;
  color: #a0a0a0;
  font-size: 14px;
}
.painting2 .container .author h6 span {
  color: #3d3e40;
  font-weight: bolder;
}
.painting2 .container .author .have {
  display: flex;
  font-size: 12px;
  margin-top: 14px;
}
// 关注的样式
.painting2 .container .author .have .attention {
  background-color: #3080f3;
  color: #ebffff;
  height: 30px;
  line-height: 30px;
  border-radius: 3px;
  text-align: center;
  padding: 0px 12px;
}
.painting2 .container .author .have .chat {
  height: 28px;
  line-height: 28px;
  border-radius: 3px;
  text-align: center;
  padding: 0px 12px;
  border: 1px solid #7d7d7d;
  margin: 0px 7px;
}
.painting2 .container .author .have .work {
  height: 28px;
  line-height: 28px;
  border-radius: 3px;
  text-align: center;
  padding: 0px 12px;
  border: 1px solid #7d7d7d;
}
.painting2 .container .author .official {
  width: 100%;
  margin-top: 29px;
  border-top: 1px solid #f0f0f0;
}
.painting2 .container .author .official .smlogo {
  display: flex;
  align-items: center;
  margin-left: 21px;
  margin-top: 12px;
}
.painting2 .container .author .official > .smlogo img {
  width: 18px;
  height: 18px;
  margin: 0px;
  margin-right: 5px;
}
.painting2 .container .author .official > .smlogo h6 {
  height: 25px;
  line-height: 25px;
  color: #353638;
}
.author .praise {
  background-color: #ffffff;
  margin-top: 14px;
  padding: 21px;
  box-shadow: 0px 0px 8px 0px #d8d8d8;
}
.author .praise .box {
  background-color: #dc3546;
  color: #ffffff;
  height: 42px;
  line-height: 42px;
  font-weight: bolder;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.author .praise .box2 {
  background-color: #e87c87;
  color: #ffffff;
  height: 42px;
  line-height: 42px;
  font-weight: bolder;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.author .praise .box i {
  display: block;
  width: 18px;
  height: 18px;
  background-image: url(../assets/img/smlogo/love.png);
  background-size: 18px 18px;
  margin-right: 7px;
}
.author .praise .box2 i {
  display: block;
  width: 18px;
  height: 18px;
  background-image: url(../assets/img/smlogo/love.png);
  background-size: 18px 18px;
  margin-right: 7px;
}
.author .adventure {
  border: 5px;
  overflow: hidden;
}
.author .adventure img {
  width: 100%;
  margin-top: 14px;
  border-radius: 4px;
}
.author .allthis {
  position: sticky;
  top: 0px;
}
.production .show .textweb {
  display: flex;
  border-top: 1px solid#f6f6f6;
  padding-top: 15px;
  height: 34px;
  align-items: center;
  justify-content: space-between;
}
.production .show .textweb .left {
  display: flex;
}
.production .show .textweb .left h6 {
  color: #999a94;
  margin-right: 13px;
}
.production .show .textweb .left h5 {
  color: #999a94;
  display: flex;
  align-items: center;
  font-size: 12px;
  margin-right: 35px;
}
.production .show .textweb .left h5 i {
  display: block;
  background-image: url(../assets/img/smlogo/waring.png);
  width: 13px;
  height: 13px;
  background-size: 13px 13px;
  margin-right: 4px;
}
.production .show .textweb .left h4 {
  color: #999a94;
  display: flex;
  align-items: center;
  font-size: 12px;
}
.production .show .textweb .left h4 i {
  display: block;
  background-image: url(../assets/img/smlogo/no.png);
  width: 16px;
  height: 16px;
  background-size: 16px 16px;
  margin-right: 4px;
}
.production .show .textweb .right {
  display: flex;
}
.production .show .textweb .right i:nth-child(1) {
  background-image: url(../assets/img/smlogo/wt-share.png);
  width: 30px;
  height: 30px;
  background-position: -64px 0px;
  margin-left: 10px;
}
.production .show .textweb .right i:nth-child(2) {
  background-image: url(../assets/img/smlogo/wt-share.png);
  width: 30px;
  height: 30px;
  background-position: -32px 0px;
  margin-left: 10px;
}
.production .show .textweb .right i:nth-child(3) {
  background-image: url(../assets/img/smlogo/wt-share.png);
  width: 30px;
  height: 30px;
  background-position: 0px 0px;
  margin-left: 10px;
}
.production .show .textweb .right i:nth-child(1):hover {
  background-position: -64px -32px;
}
.production .show .textweb .right i:nth-child(2):hover {
  background-position: -32px -32px;
}
.production .show .textweb .right i:nth-child(3):hover {
  background-position: 0px -32px;
}

.production .takepeople {
  margin-top: 21px;
  background-color: #ffffff;
  margin-right: 20px;
  padding: 21px;
  box-shadow: 0px 0px 8px 0px #d8d8d8;
}
.production .takepeople > h6 {
  color: #303433;
  font-size: 14px;
  font-weight: bold;
}
.production .takepeople .headall {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
}
.production .takepeople .headbox {
  display: flex;
  flex-direction: column;
  width: 7%;
  overflow: hidden;
  margin-right: 30px;
  align-items: center;
}
.production .takepeople .headbox img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.production .takepeople .headbox .name {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  text-align: center;
  margin-top: 9px;
  margin-bottom: 20px;
}

.production .comment {
  margin-top: 21px;
  padding: 0px 21px;
  padding-top: 14px;
  padding-bottom: 21px;
  background-color: #ffffff;
  margin-right: 20px;
  box-shadow: 0px 0px 8px 0px #d8d8d8;
}
.production .comment h6 {
  font-size: 16px;
  font-weight: bold;
  height: 50px;
  line-height: 50px;
}
// 输入框
.production .comment textarea {
  width: 100%;
  outline: none;
  border: 1px solid #e0e0e2;
  width: 100%;
  height: 77px;
  resize: none;
  padding-top: 12px;
  padding-left: 6px;
  font-size: 16px;
  border-radius: 5px;
}
.production .comment .submit {
  width: 100px;
  text-align: center;
  height: 37px;
  line-height: 37px;
  text-align: center;
  border-radius: 5px;
  background-color: #52b3e0;
  color: #ffffff;
  margin-top: 14px;
}
.production .comment .record {
  color: #989a8f;
  margin-top: 24px;
}
.production .comment .totalk .notale {
  text-align: center;
  color: #a0a2a1;
  margin-top: 27px;
  margin-bottom: 71px;
}
.production .comment .totalk .havetale {
  // display: flex;
  margin-top: 23px;

}
.production .comment .totalk .havetale .someone {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #d6d6d6;

}
.production .comment .totalk .havetale .someone .left {
  display: flex;
  padding-top: 20px;
}
.production .comment .totalk .havetale .someone .left .takehead img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.production .comment .totalk .havetale .someone .left .takehead {
  margin-right: 14px;
}
.production .comment .totalk .havetale .someone .left .text .takename {
  font-size: 16px;
  font-weight: bold;
}
.production .comment .totalk .havetale .someone .left .text .talktime {
  font-size: 12px;
  color: #999a9c;
  margin-bottom: 8px;
}
.production .comment .totalk .havetale .someone .left .text .talkcontent {
  margin-bottom: 30px;
}
.production .comment .totalk .havetale .someone .right {
  display: flex;
  align-items: center;
  margin-right: 80px;
}
.production .comment .totalk .havetale .someone .right i:nth-child(1) {
  display: block;
  content: "";
  background-image: url(../assets/img/smlogo/empty.png);
  width: 25px;
  height: 25px;
  background-size: 25px 25px;
  margin-right: 10px;
}
.production .comment .totalk .havetale .someone .right i:nth-child(2) {
  background-image: url(../assets/img/smlogo/noempty.png);
  display: block;
  content: "";
  width: 25px;
  height: 25px;
  background-size: 25px 25px;
  margin-right: 10px;
}
::v-deep .el-pagination {
  margin-top: 21px;
  text-align: center;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #333333;
}
.painting5 {
  margin-top: 20px;
  background-color: #ffffff;
}
.painting5 .container h6 {
  font-size: 15px;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
}
.painting5>.container{
  flex-direction: column;
}
.painting5>.container .another{
  display: flex;
  flex-wrap: wrap;

}
.painting5>.container .another img{
  width: 170px;
  height: 170px;
  margin-right: 15px;
  margin-bottom: 10px;
}
</style>